<template>
  <slot>我正在尝试将default Slot 和 Named Slot 混用</slot>
  <div class="form_title">
    <slot name="form_title"></slot>
  </div>
  <div class="form">
    <div v-for="item in formInputs" :key="item.id" class="input_row">
      <slot name="input_label" v-bind="item"></slot>
      <input :type="item.type" :name="item.label_name" :id="item.label_id" />
    </div>
  </div>
  <div class="attention">
    <slot name="form_attention"></slot>
  </div>
  <div class="form_func">
    <button class="submit-btn"><slot name="form_button"></slot></button>
  </div>
</template>
<script>
const loginFormInputs = [
  {
    id: 1,
    label_name: '姓名',
    label_id: 'user_name',
    type: 'text'
  },
  {
    id: 2,
    label_name: '手机',
    label_id: 'phone',
    type: 'tel'
  },
  {
    id: 3,
    label_name: '密码',
    label_id: 'password',
    type: 'password'
  }
]

const registerFormInputs = [
  ...loginFormInputs,
  {
    id: 4,
    label_name: '邮箱',
    label_id: 'email',
    type: 'email'
  }
]

export default {
  name: 'info-form',
  props: { order: String },
  data() {
    return {
      formInputs: this.order === '注册' ? registerFormInputs : loginFormInputs
    }
  }
}
</script>
<style scoped lang="scss">
.form_title {
  font-size: 36px;
  font-weight: 800;
}

.form {
  border-radius: 10px;
  // border: 1px solid #333;

  .input_row {
    display: flex;
    font-size: 24px;
    font-weight: 800;
    color: #333;
    gap: 10px;
    margin-bottom: 10px;
    input {
      border: none;
      border-bottom: 2px#000 dotted;
    }
  }
}

.attention {
  font-size: 12px;
  color: #777;
  grid-row: 2/1;
  grid-column: 2/2;
}

.submit-btn {
  width: 100%;
  height: 50px;
  background-color: #fff;
  font-size: 20px;
  border: none;
  text-align: left;

  &:hover {
    color: #fff;
    background-color: #111;
    font-weight: 700;
  }
}
</style>
